class ApprovalEditorForm extends Html {
	constructor(arg) {
		super(arg);
		this.tab = new Tab(["设置审批人", "表单权限", "操作权限"]);
		//设置审批人
		this.approverSettingPanels = new ApproverSettingPanels(arg);
		//表单权限
		this.approvalFormAuthoritySettingPanel = new ApprovalFormAuthoritySettingPanel();
		
		this.element = div("approval-editor-tab-wrapper", [
			this.tab.getElement(),
			this.approverSettingPanels.getElement(),
			this.approvalFormAuthoritySettingPanel.getElement()
		]);
	}
	
	show(){
		this.element.style.display="block"
	}
	
	hide(){
		this.element.style.display="none"
	}
	
	getData(){
		return {
			approvers:this.approverSettingPanels.getData()
		}
	}
}

class TipInfo extends Html {
	constructor(arg) {
		super(arg);
		this.element = div('item-wrapper', [
			div('item-key', '提示'),
			div('item-content more-info', [
				h('p', '', '若审批人离职，会自动转交给审批人的上级代为处理'),
				h('p', '', [
					span('', '若同一审批人在流程中重复出现，默认只审批一次。可前往'),
					span('goto-other-setting', '更多设置'),
					span('', '修改')
				])
			])
		])
	}
}

class ApprovalType extends Html {
	constructor(arg) {
		super(arg);
		this.element = h("div", "item-wrapper", h("div", "approval-type-wrapper", [

		]))
	}

}

class ApprovalEditorFooter extends Html {
	constructor(approvalAttributes) {
		super(approvalAttributes);
		this.approvalAttributes = approvalAttributes;
		this.saveBtn = h("button", {
			class: "fz-btn primary",
			type: "button"
		}, "保存");
		
		this.saveBtn.addEventListener("click",(e)=>{
			console.log(JSON.stringify(this.approvalAttributes.getData()));
		})
		
		this.cancelBtn = h("button", {
			class: "fz-btn cancel",
			type: "button"
		}, "取消");
		
		this.cancelBtn.addEventListener("click",(e)=>{
			this.approvalAttributes.hide();
		})
		
		this.element = h("div", "approval-editor-footer-wrapper", 
							div('btn-group',[this.saveBtn,this.cancelBtn]))
	}
}

class ApproverRoleSelector extends Html {
	constructor(arg) {
		super(arg);
		this.name = "角色";
		this.radioGroup1 = new RadioGroup('fanwei-group', [{
			label: "单选",
			value: "单选",
			checked:true
		}, {
			label: "多选",
			value: "多选"
		}],'',(e)=>{
			if(e.target.value==="单选"){
				this.radioGroup2.hide()
			}else if(e.target.value==="多选"){
				this.radioGroup2.setChecked("全公司")
				this.radioGroup2.show()
			}
			
		});
		this.radioGroup2 = new RadioGroup('role-group', [{
			label: "全公司",
			value: "全公司",
			checked:true
		}, {
			label: "指定成员",
			value: "指定成员"
		}, {
			label: "指定角色",
			value: "指定角色"
		}],'',(e)=>{
			if(e.target.value==="指定成员"){
				this.roleSelfUser.show()
			}else{
				this.roleSelfUser.hide()
			}
		});
		this.radioGroup2.hide()//默认隐藏
		
		//指定成员
		this.roleSelfUser = new ApproverUserSelector();
		this.roleSelfUser.hide()
		
		this.element = div('sub-approver approver-user-selector role-user', [
			h('p', '', '选择角色'),
			div('add-approver-wrapper role-selector-wrapper', this.radioGroup1.getElement()),
			h('p', '选择范围'),
			div('add-approver-wrapper role-selector-wrapper', this.radioGroup2.getElement()),
			this.roleSelfUser.getElement()
		])
	}

	show() {
		this.element.style.display = "block";
	}

	hide() {
		this.element.style.display = "none";
	}
	
	getData(){
		
	}
}

/**
 * 审批人选择器
 */
class ApproverUserSelector extends Html {
	constructor(arg) {
		super(arg);
		this.name = "指定成员";
		this.userSelector = new UserSelector();
		this.element = div('sub-approver approver-user-selector add-user', [
			h('p', '', [
				span('', '添加成员'),
				span('light-text', '（不能超过25人）')
			]),
			this.userSelector.getElement()
		])
	}

	getName() {
		return this.name;
	}

	show() {
		this.element.style.display = "block";
	}

	hide() {
		this.element.style.display = "none";
	}
	
	getData(){
		console.log("人员选择器：ApproverUserSelector：",this.userSelector.getData())
		return this.userSelector.getData();
	}
}

/**
 * 用户组选择
 */
class ApproverUserGroupSelector extends Html {
	constructor(arg) {
		super(arg);
		this.name = "用户组";
		this.select = h('select', '', [h('option', '', '用户组1'), h('option', '', '用户组2'), h('option', '', '用户组3')]);
		this.element = div('sub-approver approver-user-selector user-group', [
			h('p', '', '用户组'),
			div('add-approver-wrapper usergroup-selector-wrapper',
				div('supervisor-select',
					[this.select]
				)
			),
			div('role-info', [
				span('', '仅展示可见范围内的用户组，可前往'),
				h('a', {
					href: 'https://www.baidu.com'
				}, '管理后台'),
				span('', '进行配置')
			])
		])
	}

	getName() {
		return this.name;
	}
	
	getData(){
		return this.select.value;
	}
}

class Group {
	constructor(arr) {
		this.arr = arr;
	}

	show(name) {
		for (var i = 0; i < this.arr.length; i++) {
			let item = this.arr[i];
			if (item.getName() === name) {
				item.show();
			} else {
				item.hide();
			}
		}
	}
}

class ApproverSettingPanel extends Html {
	constructor(arg) {
		super(arg);
		this.approverSourceSelector = this._buildApproverSourceSelector();

		this.approverUserSelector = new ApproverUserSelector();
		this.roleSelector = new ApproverRoleSelector();
		this.approverUserGroupSelector = new ApproverUserGroupSelector();

		this.group = new Group([this.approverUserSelector,
			this.roleSelector,
			this.approverUserGroupSelector
		]);

		this.element = div('approval-function-setting-content', [
			div('approver-setting', [
				div('header', '审批人'),
				this.approverSourceSelector.getElement(),
				div('sub-content', [
					div('sub-content-top-line'),
					this.approverUserSelector.getElement(),
					this.roleSelector.getElement(),
					this.approverUserGroupSelector.getElement()
				])
			])
		]);
	}

	_buildApproverSourceSelector() {
		var approverSourceOptions = [{
				label: "上级",
				value: "上级"
			},
			{
				label: "部门负责人",
				value: "部门负责人"
			},
			{
				label: "角色",
				value: "角色"
			},
			{
				label: "用户组",
				value: "用户组"
			},
			{
				label: "指定成员",
				value: "指定成员",
				checked: true
			},
			{
				label: "提交人自选",
				value: "提交人自选"
			},
			{
				label: "提交人本人",
				value: "提交人本人"
			},
			{
				label: "节点审批人",
				value: "节点审批人"
			},
			{
				label: "连续多级上级",
				value: "连续多级上级"
			},
			{
				label: "连续多级部门负责人",
				value: "连续多级部门负责人"
			},
			{
				label: "表单内联系人",
				value: "表单内联系人"
			},
			{
				label: "表单内部门",
				value: "表单内部门"
			}
		];
		this.approverRadio = new RadioGroup("approver-setting-selector", approverSourceOptions, '', (e) => {
			let val = e.target.value;
			this.group.show(val);
		});
		return this.approverRadio;
	}
	
	getApproverTarget(){
		return this.approverRadio.getValue();
	}
	
	getData(){
		let approverSource = this.approverRadio.getValue();
		let approvers={};
		switch(approverSource){
			case "角色":
				break;
			case "指定成员":
				approvers = this.approverUserSelector.getData()
				break;
			case "用户组":
				approvers = this.approverUserGroupSelector.getData();
				break;
		}
		console.log("审批人设置面板")
		return approvers;
	}
}

class CcComponent extends Html {
	constructor(arg) {
		super(arg);
		this.ccAddBtn = div('add-operator', '＋ 添加抄送人');
		this.ccContainer = div('item-content cc-container');
		this.ccAddBtn.addEventListener("click", (e) => {
			this.ccContainer.appendChild(new ApproverSettingPanel().getElement())
		})
		this.element = div('item-wrapper', [
			div('item-key', '抄送人设置'),
			this.ccContainer,
			div('item-content', this.ccAddBtn)
		]);
	}
}

class ApproverSettingPanels extends Html {
	constructor(arg) {
		super(arg);
		this.approverSettingPanels = [];
		this.approversContainer = div('approvers-container');
		this.add();
		
		this.addBtn = div('add-approver-setting', div('add-operator', '＋ 添加审批人'));
		this.addBtn.addEventListener("click", (e) => {
			this.add()
		})
		
		//审批人为空时，指定人员选择器
		this.approverNonUserSelector = new ApproverUserSelector();
		this.approverNonUserSelector.hide()
		
		//抄送人组件
		this.cc = new CcComponent();
		
		//多人审批设置
		this.manyApprover = this.manyApprovers();
		
		this.element = div('approval-function-content-approver-set setting-panel', [
			this.approversContainer,
			this.addBtn,
			div('item-wrapper', [
				div('item-key', '多人审批时'),
				div('item-content', this.manyApprover.getElement()),
				div('item-key', '审批人为空时'),
				div('item-content', [this.nonApprovers().getElement(),this.approverNonUserSelector.getElement()]),
				div('item-key', '审批人与提交人为同一人时'),
				div('item-content', this.equalsSubmiter().getElement()),
				new TipInfo().getElement(),
				this.cc.getElement(),
				div('item-wrapper', [
					div('item-key', '提示'),
					div('item-content more-info', [
						h('p', '', '抄送的人数最多支持100人以内')
					])
				])
			])
		])
	}

	equalsSubmiter() {
		this.equalsSubmiter = new RadioGroup("approvel-type", [{
			label: "由提交人自己审批",
			value: "由提交人自己审批"
		}, {
			label: "自动跳过",
			value: "自动跳过"
		}, {
			label: "转交给直属上级",
			value: "转交给直属上级"
		}, {
			label: "转交部门负责人审批",
			value: "转交部门负责人审批"
		}]);
		return this.equalsSubmiter;
	}

	manyApprovers() {
		this.manyApprovers = new RadioGroup("approvel-type", [{
			label: "会签（需所有人审批人同意）",
			value: "会签（需所有人审批人同意）"
		}, {
			label: "或签（一名审批人同意即可）",
			value: "或签（一名审批人同意即可）"
		}, {
			label: "依次审批（按顺序依次审批）",
			value: "依次审批（按顺序依次审批）"
		}], 'display-block');
		return this.manyApprovers;
	}

	nonApprovers() {
		this.nonApprovers = new RadioGroup("approvel-type", [{
			label: "自动通过",
			value: "自动通过",
			checked:true
		}, {
			label: "指定人员审批",
			value: "指定人员审批"
		}, {
			label: "转交给管理员审批",
			value: "转交给管理员审批"
		}],'',(e)=>{
			if(e.target.value=='指定人员审批'){
				this.approverNonUserSelector.show();
			}else{
				this.approverNonUserSelector.hide();
			}
		});
		return this.nonApprovers;
	}

	add() {
		var item = new ApproverSettingPanel();
		this.approverSettingPanels.push(item);
		this.approversContainer.appendChild(item.getElement());
	}

	addCC() {
		this.approversContainer.appendChild(new ApproverSettingPanel().getElement())
	}

	show(){
		this.element.style.display="block"
	}
	
	hide(){
		this.element.style.display="none"
	}
	
	getData(){
		let approverss = [];
		for (var i = 0; i < this.approverSettingPanels.length; i++) {
			let panel = this.approverSettingPanels[i]
			approverss.push({source:panel.getApproverTarget(),target:panel.getData()})
		}
		return approverss;
	}
}

/**
 * 审批节点设置面板
 */
class ApprovalAttributes extends Html {
	constructor(approvalAttrubutesData) {
		super(approvalAttrubutesData);
		// todo 标题组件 approval-editor-name-wrapper

		//审批方式
		this.approvalMethodComponent = this._buildApprovalMethod();

		// 表单组件 approval-editor-form
		this.approvalForm = new ApprovalEditorForm();

		//审批人设置面板
		this.approverSettingPanel = new ApproverSettingPanels();

		// 按钮组 approval-editor-footer-wrapper
		let approvalEditorFooter = new ApprovalEditorFooter(this);

		let approvalNameEditor = new ApprovalNameEditor("审批");
		
		this.group = new Group([]);
		
		this.element = h("div", "approval-attributes", [
			h("div", "mask"),
			h("div", "approval-editor-drawer",
				h("div", "approval-editor-content", [
					div('approval-editor-name-wrapper',
						div('approval-editor-name', '审批')
					),
					div('approval-editor-form', [
						div('item-wrapper',
							div('approval-type-wrapper', [
								div('item-key-wrapper', [
									div('item-key', '审批类型'),
									label('', [
										input('checkbox', {
											value: '不计入审批效率统计'
										}), span('', '不计入审批效率统计')
									])
								]),
								div('item-content', this.approvalMethodComponent.getElement())
							])
						),
						div('', [
							this.approvalForm.getElement()
						])
					]),
					approvalEditorFooter.getElement()
				])
			)
		])
	}
	
	_buildApprovalMethod(){
		return new RadioGroup("approval-method", [{
			label: "人工审批",
			value: "人工审批",
			checked:true
		}, {
			label: "自动通过",
			value: "自动通过"
		}, {
			label: "自动拒绝",
			value: "自动拒绝"
		}],'',(e)=>{
			if(e.target.value=='人工审批'){
				this.approvalForm.show()
			}else{
				this.approvalForm.hide()
			}
		});
	}
	
	show(){
		this.element.style.display="block"
	}
	
	hide(){
		this.element.style.display="none"
	}
	
	getData(){
		this.data = {
			approvalMethod:this.approvalMethodComponent.getValue(),
			...this.approvalForm.getData()
		}
		
		return this.data;
	}
}

/**
 * 表单操作权限设置面板
 */
class ApprovalFormAuthoritySettingPanel extends Html{
	constructor(arg) {
		super(arg);
	    this.element = div('approval-function-content-form-authority-set setting-panel',
							this._buildTable()
						)
	}
	
	_buildTable(){
		return h('table','',
					h('thead','',[
						h('td','','表单字段'),
						h('td','',
							label('',[
								input('checkbox',{value:'可读'}),
								span('','可读')
							])
						),
						h('td','',
							label('',[
								input('checkbox',{value:'编辑'}),
								span('','编辑')
							])
						)
					])
				)
	}
}


var approvalAttributes = new ApprovalAttributes({});
document.body.appendChild(approvalAttributes.getElement())
